<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>路口详情信息</title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/table.css" />
		<!--地图-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>基本地图展示</title>
		<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
		<script src="http://webapi.amap.com/maps?v=1.3&key=bce34716ae32281536e4b60b85fe3dc8"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<!--地图-->
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>路口基本信息</legend>
		</fieldset>
		<blockquote class="layui-elem-quote">
			<p>路口名称：<span id="lukouName"></span></p>
			<p>维护人员：<span id="maintenanceMan"></span></p>
			<p>维护人员电话：<span id="maintenancePhone"></span></p>
			<p>施工单位：<span id="constructDep"></span></p>
			<p>施工时间：<span id="constructTime"></span></p>
		</blockquote>

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
			<legend>路口设备列表</legend>
			<blockquote class="layui-elem-quote">
				<button class="layui-btn layui-btn-normal" id="batch_set">批量设置</button>
				<button class="layui-btn layui-btn-danger" id="batch_check">批量检测</button>
			</blockquote>
		</fieldset>

		<table class="layui-table" lay-skin="line">
			<thead>
			<tr>
				<th>设备编号</th>
				<th>主桩</th>
				<th>主桩ip</th>
				<th>副桩</th>
				<th>副桩ip</th>
				<th>参数设置</th>
				<th>检测是否在线</th>
			</tr>
			</thead>
			<tbody id="tabContent">
			</tbody>
		</table>

		<script type="text/javascript" src="plugins/layui/layui.js"></script>

		<script>
			//记录路口id
			var lukou_id="";
			layui.config({
				base: 'plugins/layui/modules/'
			});
			layui.use(['icheck','laypage','layer'], function() {
				var $ = layui.jquery,
						laypage = layui.laypage,
						layer = parent.layer === undefined ? layui.layer : parent.layer;
				//页面初始化的时候执行
				$(function (){
					//获取链接中参数的函数（例如：http://localhost/index?username=admin，获取username的值admin）
					$.getUrlParam = function (name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
						var r = window.location.search.substr(1).match(reg);
						if (r != null) return unescape(r[2]); return null;
					}
					lukou_id = $.getUrlParam('lukou_id');
					getData(lukou_id);
				});

				/*批量设置*/
				$('#batch_set').on('click', function() {
					/*以打开另外一个网页的形式打开弹窗*/
					layer.open({
						type: 2,
						title: '设备参数批量设置',
						shadeClose: true,
						shade: 0.8,
						area: ['900px', '700px'],
						//将路口id和设备id都传过去
						content: 'admin_lukou_details_batch_set.html?lukou_id='+lukou_id
					});
				});

				/*批量检测*/
				$('#batch_check').on('click', function() {
					/*测试接口是否联通*/
					layer.msg('批量测试设备是否在线...', {
						icon: 16
						,shade: 0.01
					});
					setTimeout(function(){
						layer.msg('测试全部通过...');
					}, 2000);
				});

				//点击刷新按钮
				$('#refresh').on('click', function() {
					getData("1");
					layer.msg('刷新成功');
				});

				/*查看校验设备是否在线*/
				$('#tabContent').on('click', '.layui-btn-normal', function() {
					var obj = $(this);
					var id = obj.parents('tr').attr('id');
					layer.msg("测试是否在线！设备id为："+id);
				});

				/*参数设置*/
				$('#tabContent').on('click', '.layui-btn-danger', function() {
					var obj = $(this);
					var device_id = obj.parents('tr').attr('id');
					/*以打开另外一个网页的形式打开弹窗*/
					layer.open({
						type: 2,
						title: '设备参数设置',
						shadeClose: true,
						shade: 0.8,
						area: ['900px', '700px'],
						//将路口id和设备id都传过去
						content: 'admin_lukou_details_set.html?lukou_id='+lukou_id+'&&device_id='+device_id
					});

				});

				//根据id从后台获取数据函数。
				function getData(lukou_id){

					$.post("/get_lukou_by_lukouId",{lukou_id:lukou_id},function(result){
						//拼接html内容
						var tabContent="";
						//获取后台json数据
						var mydata=result.deviceInfo;
						var lukouName=result.lukouName;
						var maintenanceMan=result.maintenanceMan;
						var maintenancePhone=result.maintenancePhone;
						var constructDep=result.constructDep;
						var constructTime=result.constructTime;

						for(var i=0;i<mydata.length;i++){
							tabContent=tabContent+
									'<tr id='+mydata[i]._id+'>'+
									'<td>'+mydata[i].deviceNumber+'</td>'+
									'<td>'+mydata[i].deviceOne+'</td>'+
									'<td>'+mydata[i].deviceOneIp+'</td>'+
									'<td>'+mydata[i].deviceTwo+'</td>'+
									'<td>'+mydata[i].deviceTwoIp+'</td>'+
									'<td><span class="layui-btn layui-btn-danger layui-btn-mini">参数设置</span></td>'+
									'<td><span class="layui-btn layui-btn-normal layui-btn-mini">点击检测</span></td>'+
									'</tr>';
						}
						//将拼接好的数据填入#tabContent中
						$("#tabContent").html(tabContent);
						$("#lukouName").html(lukouName);
						$("#maintenanceMan").html(maintenanceMan);
						$("#maintenancePhone").html(maintenancePhone);
						$("#constructDep").html(constructDep);
						$("#constructTime").html(constructTime);

					});
				};
			});
		</script>
	</body>

</html>